import { getCookie, removeCookie, setCookie } from "@utils/StorageUtil";
import { getPreviewUrl } from "@utils/WeStudyUtil";
import { Button, Card, Col, message, Row, Space } from "antd";
import { FC, useState } from "react";
import TrainProblemExplain from "./TrainProblemExplain";

const TrainProblemDiscuss: FC<any> = ({ problem, refreshProblem, submitTrain }) => {

  // 3. 提交处理
  const handleSubmit = (result:any) => {
    setCheckStatus(true);
    if(result === "true") {
      var train = Number.parseInt(getCookie("problemTrain"));
      setCookie("problemTrain", (train + 1).toString());
      message.success("回答正确");
    }else{
      message.error("已记录为薄弱点，后续系统会重点训练");
    }
    submitTrain("discuss", problem.problemId, result);
  };

  var defaultImg = getPreviewUrl() + "fb007e80a3b94ef1a12a7e53088be62c";

  const [checkStatus, setCheckStatus] = useState(false);

  if(checkStatus) {
    return <TrainProblemExplain problem={problem} refreshProblem={refreshProblem} submitTrain={submitTrain}/>;
  }

  return (
    <>
      <Card
        title="答案"
        hoverable
        cover={
          <img height={360} style={{ objectFit: "contain" }} src={defaultImg} />
        }
      ></Card>
      <Row gutter={16}>
        {/* 列间距 16px */}
        <Col span={12}>
          <Button
            type="primary"
            onClick={()=>handleSubmit("true")}
            size="large"
            style={{
              marginLeft: "20%",
              width: "60%",
              height: 50,
              background: "#52c41a",
              borderRadius: 8,
              fontSize: 16,
              marginTop: 30,
            }}
          >
            我能做对
          </Button>
        </Col>
        <Col span={12}>
          <Button
            type="primary"
            onClick={()=>handleSubmit("false")}
            size="large"
            style={{
              marginLeft: "20%",
              width: "60%",
              height: 50,
              background: "#52c41a",
              borderRadius: 8,
              fontSize: 16,
              marginTop: 30,
            }}
          >
            想看答案
          </Button>
        </Col>
      </Row>
    </>
  );
};

export default TrainProblemDiscuss;
